import React, { Component } from 'react';
import { message } from 'antd';
import api from '../api/api'
class OlPopup extends Component {
    constructor(props) {
        super(props)
        this.state = {
            popupIconShow:false,
            popupIcon: [{ id: 1, icon: '选择' }, { id: 2, icon: '移动' }, { id: 3, icon: '编辑' }, { id: 4, icon: '删除' }],
            popupIdx: 1,/* 弹框选中项 */
            iconList: [
                { id: 1, src: 'http://cyclv.gitee.io/imgs/ol/point/ol1.png', srcKey: 'ol1' },
                { id: 2, src: 'http://cyclv.gitee.io/imgs/ol/point/ol2.png', srcKey: 'ol2' },
                { id: 3, src: 'http://cyclv.gitee.io/imgs/ol/point/ol3.png', srcKey: 'ol3' }
            ],
            iconUrl:'ol1',
            formInfo: this.props.myPopup.formInfo
        }
    }
    upFormInfo=(info)=>{
        this.setState({
            formInfo:info
        })
    }
    popupEdit = (info) => {
        this.setState({ popupIdx: info })
        this.props.PopupBack('edit', info)
    }
    // 关闭
    popupClose = () => {
        this.props.PopupBack('close', '')
    }
    /* 表单内容修改 */
    formChange = (value, e) => {
        let data = Object.assign({}, this.state.formInfo, { [value]: e.target.value })
        this.setState({
            formInfo: data
        })
    }
    /* 表单提交事件 */
    popupClick = (event) => {
        event.preventDefault();
        let info =  this.state.formInfo
        if (info) {
            var list = JSON.parse(localStorage.getItem('featureList'))||[];
            var idx = list.findIndex(function (item) {
                return item.id === info.id
            })
            list[idx].title = info.title;
            list[idx].remark = info.remark;
            list[idx].src =  this.state.iconUrl;
            localStorage.setItem('featureList', JSON.stringify(list))
            message.success('添加成功')
            this.popupClose()
        } else {
            message.error('没有内容可以修改')
        }
    }
    /* 更改图片事件 */
    imgUpdate = (info) => {
        this.returnBack(true)
    }
    returnBack = (info) => {
        this.setState({ popupIconShow: info })
    }
    /* 选择图片 */
    imgSelect = (info) => {
        this.setState({
            iconUrl:info
        })
        this.returnBack(false)
    }
    render() {
        var popupInfo = this.props.myPopup;
        var formInfo = this.state.formInfo
        return (
            <div className='left-popup'>
                <div id="popup-closer" className="ol-popup-closer" onClick={this.popupClose.bind(this, false, false)}></div>
                <div className='ol-popup-top'>{popupInfo.title}</div>
                {/* 当时新增Point */}
                {this.props.drawType === 'Point' &&
                    <div className='ol-popup-icon flexct'>默认</div>
                }
                {/* 只有当类型为修改时展示 */}
                {this.props.drawType === 'update' &&
                    <div className='ol-popup-icon flexct'>
                        {this.state.popupIcon.map((item, idx) => {
                            return (
                                <div key={idx} className={item.id === this.state.popupIdx ? 'popup-icon-select info' : 'info'} onClick={this.popupEdit.bind(this, item.id)}>{item.icon}</div>
                            )
                        })}
                    </div>
                }
                {/* 只有当有信息时展示 */}
                {formInfo &&
                    <form className='ol-popup-info' onSubmit={this.popupClick}>
                        <div className='list flexfs'><label>标题</label>
                            <input type="text" onChange={this.formChange.bind(this, 'title')} value={formInfo.title}></input>
                        </div>
                        <div className='flexfs' style={{ marginTop: 20 }}>
                            <label>备注</label>
                            <textarea onChange={this.formChange.bind(this, 'remark')} value={formInfo.remark}></textarea>
                        </div>
                        <div className='list flexfs'>
                            <label>类型</label>{formInfo.type}
                        </div>
                        {formInfo.type === 'Point' &&
                            <div className='list flexfs'>
                                <label>图标</label>
                                <img style={{ width: 32, height: 32 }} src={formInfo.src ? api.iconUrl + formInfo.src + '.png' : api.iconUrl+this.state.iconUrl+'.png'} alt='图片' />
                                <p onClick={this.imgUpdate}>更改</p>
                            </div>
                        }
                        <input style={{ marginTop: 20, marginLeft: 40 }} className='btnOne' type="submit" value="保存" />
                    </form>
                }
                {/* 选择图片 */}
                {this.state.popupIconShow &&
                    <div className='popup-icon'>
                        {this.state.iconList.map((item) => {
                            return (
                                <img key={item.id} src={item.src} style={{ width: 32, height: 32 }} onClick={this.imgSelect.bind(this, item.srcKey)} alt={item.id} />
                            )
                        })}
                        <button className='right-button' onClick={this.returnBack.bind(this, false)}>返回</button>
                    </div>
                }
            </div>
        )
    }
}
export default OlPopup;
